<template>
  <div>
    <h1>store中的count:{{ count }}</h1>
    <h1>count的平方{{ countSqrt }}</h1>
    <h1>store中的num:{{ num }}</h1>

    <button @click="increaseN({ n: 20 })">+n</button>
    <button @click="increase">+1</button>

    <!-- action -->

    <button @click="increaseWait">过一秒+1</button>
    <button @click="increaseNWait({ n: 20 })">过一秒+N</button>

    <!-- getter -->
  </div>
</template>

<script>
  export default {
    name: "Item",
    mounted() {
      console.log(this);
    },

    computed: {
      // ...mapState("count", ["count", "num"]),

      // count() {
      //   return this.$store.state.Item.count;
      // },
      // num() {
      //   return this.$store.state.Item.num;
      // },
      // countSqrt() {
      //   return this.$store.getters["Item/countSqrt"];
      // },
      //   ...mapGetters("Item", ["countSqrt"]),

      // ---------------
      count() {
        return this.$store.state.Item.count;
      },
      num() {
        return this.$store.state.Item.num;
      },
      countSqrt() {
        // getter.Item/coutSqrt 等于getters["Item/countSqrt"] 不变成字符串会被认为是除以
        return this.$store.getters["Item/countSqrt"];
      },
    },
    methods: {
      // increase() {
      //   this.$store.commit("Item/increase");
      // },
      // increaseN(payload) {
      //   this.$store.commit("Item/increaseN", payload);
      // },
      // increaseWait() {
      //   this.$store.dispatch("Item/increaseWait");
      // },
      // //   ...mapMutations("Item", ["increase", "increaseN"]),
      // //   ...mapActions("Item", ["increaseWait", "increaseNWait"]),
      // increaseNWait(payload) {
      //   this.$store.dispatch("Item/increaseNWait", payload);
      // },

      increase() {
        this.$store.commit("Item/increase");
      },
      increaseN(payload) {
        this.$store.commit("Item/increaseN", payload);
      },
      increaseWait() {
        this.$store.dispatch("Item/increaseWait");
      },
      increaseNWait(payload) {
        this.$store.dispatch("Item/increaseNWait", payload);
      },
    },
  };
</script>

<style></style>
